<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计时器</title>
</head>
<style>
    /*#control{*/
    /*!*background-color: royalblue;*!*/
    /*position:relative;*/
    /*align: center;*/
    /*!*top:50%;left:50%;*!*/
    /*!*margin-left:50px;*!*/
    /*!*margin-top:40px*!*/
    /*}*/
    /*#list{*/
    /*color: aquamarine;*/
    /*position: absolute;*/
    /*}*/
</style>
<body>
<div>
        <span id="timer">
        <span id="h">00</span> :
        <span id="m">00</span> :
        <span id="s">00</span> .
        <span id="ms">000</span>
        </span>
</div>
<div id="control">
    <button type="button" id="start">开始</button>
    <button type="button" id="counts">计次</button>
    <button type="button" id="stop">暂停</button>
    <button type="button" id="reset">重置</button>
</div>
<div id="list"></div>
<script>
    var timer = document.getElementById('timer');
    var start = document.getElementById('start');
    var counts = document.getElementById('counts');
    var stop = document.getElementById('stop');
    var reset = document.getElementById('reset');
    var h = document.getElementById('h');
    var m = document.getElementById('m');
    var s = document.getElementById('s');
    var ms = document.getElementById('ms');
    var l = document.getElementById('list');

    var myTimestamp0 = Date.parse(new Date());
    console.log(new Date());
    console.log(myTimestamp0);

    var S = setInterval(setSecond, 1);

    function setSecond() {
        var t1 = new Date();
        ms.innerText = t1.getMilliseconds();
        //此刻的时间戳
        var myTimestamp1 = Date.parse(t1);
        // console.log(ms);
        // console.log(myTimestamp1);

        //按下秒表的时候跟当前时间相比，经过的秒数
        var s1 = (myTimestamp1 - myTimestamp0) / 1000;
        s.innerText = addZero(s1);
        var second0 = s.innerText;
        if (second0 >= 60) {
            // 获取分的数据，并且在原有的基础上加1
            m.innerText = addZero(parseInt(m.innerText) + 1);
            //同时，秒的数值重置为0
            s.innerText = addZero(0);
            // s.innerText = '00';
            //计时阶段重新开始
            myTimestamp0 = Date.parse(new Date());
        }

        var minutes0 = m.innerText;
        if (minutes0 >= 60) {
            //获取分的数据，并且在原有的基础上加1
            h.innerText = addZero(parseInt(h.innerText) + 1);
            //秒的数值，重置为0
            m.innerText = addZero(0);
            // m1.innerText = '00';
        }
    }

    // start.onclick = setInterval(setSecond,1);

    counts.onclick = function () {
        var count0 = h.innerText + ':' +
            m.innerText + ':' +
            s.innerText + ':' +
            ms.innerText;
        l.innerHTML = l.innerHTML + '<div>' + count0 + '</div>';
        document.getElementById('list').style.color = 'rgba(0,0,0,0.3)';

        var str = l.lastElementChild;
        console.log(str);
        for (var i = 0; i < S; i++) {
            i += S;
            S = S + 1;
            // console.log(i);
            // console.log(S);
            if (i <= 60) {
                document.getElementById('list').style.color = 'blue';
                console.log('循环体内1：' + i);
            } else {
                document.getElementById('list').style.color = 'yellow';
                console.log('循环体内2：' + i);
            }
        }


    };
    // start.onclick =;
    stop.onclick = function () {
        clearInterval(S);
    }
    reset.onclick = function () {
        clearInterval(S);
        h.innerText = addZero(0);
        m.innerText = addZero(0);
        s.innerText = addZero(0);
        ms.innerText = addZero(0);
        l.innerHTML = '';
    };

    function addZero(x) {
        if (x < 10) {
            return '0' + x;
        } else {
            return x;
        }

    }
</script>
</body>
</html>